<template>
    <view class="goods-edit bg-f5 fullpage-min">
        <u-gap height="20"></u-gap>
        <input-field borderless type="textarea" fieldalign="right" placeholder="请输入商品名称" label="商品名称" v-model="form.name" autosize>
        </input-field>
        <input-field borderless type="text" fieldalign="right" placeholder="请设置商品库存" label="当前库存" v-model="form.count" autosize>
        </input-field>
        <view class="lump p-20 bg-ff flex-row  jc-between">
           <view style="width: 20%;">特价商品</view> 
           <u-switch v-model="checked"active-color="#74BEFF" @change="changeChecked"></u-switch>
        </view>
        <input-field v-if="checked" inputColor="#f82727" borderless type="text" fieldalign="right" placeholder="请设置特价价格" label="特价价格" v-model="form.price" autosize>
        </input-field>
        <view class="lump p-20 bg-ff flex-row  jc-between">
           <view style="width: 20%;">商家推荐</view> 
           <u-switch v-model="checked"active-color="#74BEFF" @change="changeChecked"></u-switch>
        </view>
        <view class="content bg-ff flex-row" >
            <view class="title  color-3 size-28 " style="width: 20%;">
                上传图片<text class="color-9 size-24">(当前还可上传{{uploadLength}}张图片)</text>
            </view>
            <view class="photo-area flex-warp ai-center ">
                <view class="images" v-for="(sencondImage,sencondImageIndex) in form.img" :key="sencondImageIndex">
                    <image :src="sencondImage" mode=""></image>
                    <image class="delImage pos-absolute" src="../../static/epidemic-close.png" style="" mode=""
                        @click="delImage(sencondImageIndex)"></image>
                </view>
                <view class="upload flex-row ai-center jc-center borderRadius-10 m-left-20" v-if="form.img.length<6"
                    @click="uploadSecondImage">
                    <u-icon class="icon" size="80" color="#b5b5b5" name="plus"></u-icon>
                </view>
            </view>
        </view>
        <view class="content bg-ff flex-row">
            <view class="title  color-3 size-28  " style="width: 20%;">
                上传视频<text class="color-9 size-24">(当前还可上传{{uploadLength}}个视频)</text>
            </view>
            <view class="photo-area flex-warp ai-center flex-2">
                <view class="images" v-for="(videoItem,videoIndex) in form.video" :key="videoIndex">
                    <video :src="videoItem" mode=""></video>
                    <image class="delImage pos-absolute" src="../../static/epidemic-close.png" style="" mode=""
                        @click="delVideo(videoIndex)"></image>
                </view>
                <view class="upload-video flex-row ai-center jc-center borderRadius-10 m-left-20"
                    v-if="form.video.length<6" @click="uploadVideo">
                    <u-icon class="icon" size="80" color="#b5b5b5" name="plus"></u-icon>
                </view>
            </view>
        </view>
      
        <view class="btn-bottom-norma pos-absolute" style="left: 40rpx ;right: 40rpx;bottom: 40rpx;">
            <g-button class="btn-bottom-normal-content" :loading="submitLoading" size="large" type="primary" @click="submit">
                保存修改
            </g-button>
        </view>
        <modal ref="dialogPrice" title="特价商品价格" v-model="reducedPrice" async-close @confirm="setPrice">
        	<view class="modal-input-area">
        		<input class="modal-input-content" type="text" v-model="localPrice" placeholder="请输入特价商品价格" />
        	</view>
        </modal>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                submitLoading:false,
                maxLength:6,
                form: {
                    img: [],
                    video: [],
                    name: '',
                    count:-1,
                    price:''
                },
                reducedPrice:false,
                localPrice:'',
                checked:false
            }
        },
        computed: {
            uploadLength() {
                return this.maxLength-(this.form.img.length+this.form.video.length) 
            },
           
        },
        methods:{
            setPrice(){
              this.form.price=this.localPrice
                this.reducedPrice=false
            },
            changeChecked(checked){
                this.checked=checked
               if( this.checked){
                   this.reducedPrice=true
               }else{
                   this.reducedPrice=false
               }
            },
            uploadVideo() {
                uni.chooseVideo({
                    count: 1,
                    success: (res) => {
                        // uploadImage(res.tempFilePath,2)
                        //     .then(res => {
                        //           let video=res.data.url
                        //         this.form.video = this.form.video.concat(video).slice(0, this
                        //             .maxLength)
                        //     }, (fail) => { console.log(fail)})
                    }
                })
            },
            delVideo(index) {
                this.form.video.splice(index, 1)
            },
           uploadSecondImage() {
               uni.chooseImage({
                   count: 6,
                   success: (res) => {
                       console.log(res)
                       // uploadImageList(res.tempFiles)
                       //     .then(data => {
                       //         this.form.img = this.form.img.concat(data).slice(0, this.maxLength)
                       //     }, () => {})
                   }
               })
           },
           delImage(index) {
               this.form.img.splice(index, 1)
           },
            
        }
    }
</script>

<style lang="scss" scoped>
    .goods-edit{
        .lump{
            border-bottom: 1rpx dashed #eee;
        }
        .content {
            padding:   20rpx;
            border-bottom:  1rpx dashed #eee;
            .title {
                margin-bottom: 30rpx;
            }
        
            .images {
                position: relative;
                margin: 20rpx;
                display: flex;
                flex-wrap: wrap;
        
                .delImage {
                    width: 40rpx;
                    height: 40rpx;
                    top: 6rpx;
                    right: 10rpx;
                    z-index: 999;
                }
        
        
                image {
                    width: 140rpx;
                    height: 140rpx;
                    border-radius: 10rpx;
                }
            }
        
            .upload {
                border: 1px dashed #b5b5b5;
                width: 140rpx;
                height: 140rpx;
        
                .remarks {
                    color: #999;
                    margin-bottom: 5rpx;
                }
            }
            .upload-video{
                border: 1px dashed #b5b5b5;
                width: 175rpx;
                height: 125rpx;
                
                .remarks {
                    color: #999;
                    margin-bottom: 5rpx;
                }
            }
        }
    }
</style>
